<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>UC浏览器</title>
		<style>
		*{padding: 0;
			margin: 0;}
		img{
			vertical-align: bottom;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration: none;
		}	
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}	
		.clearfix::before,.clearfix::after{
			content: '';
			display: table;
			
		}
		.clearfix::after{
			clear:both;
		}
		.bd{
			border: 1px solid red	;
		}
		.w{
			width: 986px;
			margin: 0 auto;
		}	
		header{			
			position: fixed;
			z-index: 100;
			background-color: #fff;
			width: 100%;			
		}	
		.logo{
		
			padding-top: 15px;
			padding-bottom: 12px;
		}
		.navigation{
			padding-right: 20px;
			padding-top: 29px;
			position: relative;
		
		}
		.navigation >li{	
			padding: 0 10px;
			margin-left: 30px;
			}
		.current{
			border-bottom: 3px solid red;
		}	
		.navigation>a{
			display: block;
			line-height: 62px;
			font-size: 20px;			
		}
		.navigation>li:hover{
			border-bottom: 3px solid green;			
			
			}
		.subnav a{
			display: block;
			line-height: 20px;
			font-size: 16px;
		}
		.subnav{
			display: none;
			position: absolute;
			}
		.navigation li:hover .subnav{
			display: block;
			background-color: #44B9ED
			}						
		.subnav li:hover{
			background-color: #CCCC00
		}	
		.main{
			/* margin-top: 70px; */
		padding-top: 70px;	
		}
		.banner{
				
			height: 400px;
			background:#191919 url(images/banner.jpg) no-repeat center 0;
		}
		.icons{
			border-bottom: 1px solid #989994;			
		}
		.icon{
			width: 138px;
			padding-top: 58px;
			background: url(./images/icon.png) 48px 21px no-repeat;
		}
		.icon:nth-child(2){
			background-position: -89px 20px;
		}
		.icon:nth-child(3){
		background-position: -227px 20px;		
		position: relative;
		}
		/* 以下是new标记 */
		.icon:nth-child(3)::before{
			content: "";
			width: 23px;
			height: 11px;
			background: url(images/icon.png)-140px -280px;
			position: absolute;
			top: 15px;
			left: 83px;
			}
		.icon:nth-child(4){
			background-position: -365px 20px;
		/* 	background-position: -356px -265px; */
		position: relative;
		}
		.icon:nth-child(4)::before{
			content: "";
			width: 23px;
			height: 11px;
			background: url(images/icon.png)-140px -280px;
			position: absolute;
			top: 15px;
			left: 83px;
			}
		.icon:nth-child(5){
			background-position: -503px 20px;
		}
		.icon:nth-child(6){
			background-position: -641px 20px;
		}
		.icon:nth-child(1):hover{
			background-position: 49px -99px;
		}
		.icon:nth-child(2):hover{
			background-position: -89px -99px;
		}
		.icon:nth-child(3):hover{
			background-position: -227px -99px;
		}
		.icon:nth-child(4):hover{
			background-position: -365px -99px;
		}
		.icon:nth-child(5):hover{
			background-position: -503px -99px;
		}
		.icon:nth-child(6):hover{
			background-position: -641px -99px;
		}
		
		.icon a{
			display: block;
			line-height: 82px;
			font-size: 11px;
			text-align: center;
		}
		.icons .w{
			position: relative;
		}
		.twocode{
			
			width: 128px;
			background: url(images/twocode.png) no-repeat;
			float: left;
			line-height: 71px;
			font-size: 11px;
			padding-top: 106px;
			text-align: center;	
			position: absolute;
			top: -34px;
			right: -4px;											
		    }
		.news{}
		.new{
			width: 290px;
		}
		.title{
			padding-right: 20px;
		}
		.title h4{
			padding-top: 20px;
			font-size: 21px;
			line-height: 61px;
		}
		.title a{
			position: relative;
			font-size: 12px;
			line-height: 58px;
			padding-right: 10px;
			padding-top: 23px;
		}
		.title a:: before{
			content: "";			
			width: 5px;
			height: 5px;
			border: 2px solid red;
			border-left: 2px solid transparent;
			border-bottom: 2px solid transparent;
			transform: rotate(45deg);
			position: absolute;
			top: 25px;
			left: 28px;
		}
		.title div{
			border: 2px solid red;
			width: 5px;
			height: 5px;
			border-left: 2px solid transparent;
			border-bottom: 2px solid transparent;
			transform: rotate(45deg);
			margin-top: 46px;
			margin-right: -30px;
		}
		.pic1{
			padding-top: 120px;
			background:#f2f2f2 url(images/activity_pic.jpg)no-repeat ;
		}
		.pic2{
			padding-top: 120px;
			background:#f2f2f2 url(images/news_pic.jpg)no-repeat ;
		}
		.pic3{
			padding-top: 120px;
			background:#f2f2f2 url(images/community_pic.jpg)no-repeat ;
		}
		.pic1 a{
			display: block;
		    text-align: center;
			font-size: 12px;
			line-height: 34px;
		
		}
		.pic2 a{
			display: block;
		    text-align: center;
			font-size: 12px;
			line-height: 34px;
		
		}
		.pic3 a{
			display: block;
		    text-align: center;
			font-size: 12px;
			line-height: 34px;
		
		}
		.new:nth-child(1){
			padding-right: 58px;
		}	
		.new:nth-child(2){
			padding-right: 58px;
		}			
		.new ul{}	
		.new ul li{}
		.new ul :nth-child(1){
			padding-top: 16px;			
		}
		.new ul :nth-child(5){
			padding-bottom: 43px;			
		}
		.new ul li a{
			font-size: 12px;
			line-height: 26px;
		}	
		footer{
			height: 470px;
			background-color: #333333 ;
			}
		h5{
			padding-top: 47px;
			color: #616161;
			font-size: 12px;
			line-height: 20px;
		}	
		footer a{
			display: block;
			color: #616161;
			font-size: 12px;
			line-height: 20px;
		}
		.tex1{
			width: 80px;
			padding-right: 86px;
		}	
		.tex2{
				width: 80px;
			padding-right: 86px;
		}
		.tex3{
				width: 80px;
			padding-right: 86px;
		}	
		.tex4{
				width: 80px;
			padding-right: 86px;
		}
		.tex5{
				width: 80px;
			padding-right:52px;
		}
		.tex6 h5{
			display: block;
			padding-top: 35px;
			width: 153px;
			margin-left: 34px;
			font-size: 14px;
			line-height: 38px;
			border: 1px solid #383939;
		}
		.tex6 a{
			display: block;
			margin-left: 34px;
			width: 153px;
			font-size: 16px;
			line-height: 30px;
			
			
			}
		.tex6{			
		/* background:url(images/icon.png) 0px -248px no-repeat;	 */
		position: relative;
			}
		.b1::before{
			content: "";
			width: 15px;
			height: 15px;
			background: url(images/icon.png) 0px -293px;
			position: absolute;
			top: 48px;	
			left: 9px;		
		}	
		.b2::before{
			content: "";
			width: 15px;
			height: 16px;
			background: url(images/icon.png) 0px -320px;
			position: absolute;
			top: 84px;	
			left: 9px;
			}
		.b2:hover{
			content: "";
			width: 15px;
			height: 16px;
			background: url(images/icon.png) -27px -320px;
			position: absolute;
			top: 81px;	
			left: 9px;
			}	
		.b3::before{
			content: "";
			width: 18px;
			height: 13px;
			background: url(images/icon.png) 0px -348px;
			position: absolute;
			top: 114px;	
			left: 9px;
			}
		.b3::hover{
			content: "";
			width: 18px;
			height: 13px;
			background: url(images/icon.png) -25px -348px;
			position: absolute;
			top: 120px;	
			left: 9px;
			}	
		.b4::before{
			content: "";
			width: 17px;
			height: 13px;
			background: url(images/icon.png) 0px -373px;
			position: absolute;
			top: 143px;	
			left: 9px;
			}
		.b4:hover{
			content: "";
			width: 17px;
			height: 13px;
			background: url(images/icon.png) -25px -373px;
			position: absolute;
			top: 150px;	
			left: 9px;
			}	
		.b5::before{
			content: "";
			width: 20px;
			height: 15px;
			background: url(images/icon.png) 0px -398px;
			position: absolute;
			top: 170px;	
			left: 9px;
			}
		.b5::hover{
			content: "";
			width: 20px;
			height: 16px;
			background: url(images/icon.png) -25px -398px;
			position: absolute;
			top: 180px;	
			left: 9px;
			}	
		.b6::before{
			content: "";
			width: 17px;
			height: 18px;
			background: url(images/icon.png) 0px -422px;
			position: absolute;
			top: 198px;	
			left: 9px;
			}
		.b6:hover{
			content: "";
			width: 17px;
			height: 18px;
			background: url(images/icon.png) -25px -422px;
			position: absolute;
			top: 208px;	
			left: 9px;
			}	
		.b7::before{
			content: "";
			width: 21px;
			height: 18px;
			background: url(images/icon.png) 0px -446px;
			position: absolute;
			top: 228px;	
			left: 9px;
			}
		.b7:hover{
			content: "";
			width: 21px;
			height: 18px;
			background: url(images/icon.png) -25px -446px;
			position: absolute;
			top: 238px;	
			left: 9px;
			}												
/* 横排文字部分	 */	
        .txt{
			margin-top: 278px;
			border-top:    1px dashed  #5c5d5e ;
			border-bottom:1px dashed  #5c5d5e ;
			position: relative;
		}
		.txt::before{
			content: "";
			width: 16px;
			height: 16px;
			background: url(images/icon.png) -100px -281px;
			position: absolute;
			top: 17px;
			left: 970px;			
		}
		.txt ul li a{
			margin-top: 15px;
			margin-bottom: 10px;
			padding-left: 9px;
			padding-right: 9px;
			border-right: 1px solid #5c5d5e ;			
			font-size: 12px;
		}
		.txt1{
			
			border-top:    1px dashed  #5c5d5e ;
			border-bottom:1px dashed  #5c5d5e ;
			position: relative;
		}
		.txt1::before{
			content: "";
			width: 16px;
			height: 16px;
			background: url(images/icon.png) -100px -281px;
			position: absolute;
			top: 17px;
			left: 970px;
			
		}
		.txt1 ul li a{
			margin-top: 15px;
			margin-bottom: 10px;
			padding-left: 9px;
			padding-right: 9px;
			border-right: 1px solid #5c5d5e ;			
			font-size: 12px;
		}
		.end{
			padding-top: 19px;
		}
		.logo_1{
		margin-top: 13px;
		}
		p{ 
			line-height: 20px;
			font-size: 12px;
			padding-left: 17px;
			color: #5c5d5e;
			height: 54px;
			width: 399px;
		}
		.logo_2{
		padding-left: 90px;	
		margin-top: 4px;
		}
		.logo_3{
			padding-top: 4px;
			padding-left: 17px;
			padding-right: 17px;
		}
		
		.logo_4{
			padding-top: 4px;
			padding-right: 15px;
		}													
		</style>
	</head>
	<body>
		<!-- 语义化标签 -->
		<header class="  clearfix">
		<div class="logo  fl"><img src="./images/uclogo.png" alt=""></div>
		<ul class="navigation  clearfix fr">
			<li class="fl current"><a href="">首页</a></li>
			<li class="fl"><a href="">下载</a>
			<ul class="subnav">
			<li><a href="">手机UC    </a></li>
			<li><a href="">电脑浏览器 </a></li>
			<li><a href=""> TV浏览器 </a></li>	
			</ul>
			</li>
			<li class="fl"><a href="">公司</a></li>
			<li class="fl"><a href="">合作</a></li>
			<li class="fl"><a href="">社区</a></li>
			<li class="fl"><a href="">帮助</a></li>
		</ul>
		</header>
		<div class="main">
		  <div class="banner"></div>   
		<div class="icons ">
			  <div class="w clearfix">
				  <div class="icon  fl"><a href="">  Android版下载 </a></div>
				  <div class="icon  fl"><a href="">  iPhone版下载  </a></div>
				  <div class="icon  fl"><a href="">   电脑版下载   </a></div>
				  <div class="icon  fl"><a href="">   Pad版下载    </a></div>
				  <div class="icon  fl"><a href="">    TV版下载    </a></div>
				  <div class="icon  fl"><a href="">   WP版下载     </a></div>
				  <div class="twocode   ">手机扫一扫下载</div>
			  </div>
		</div>      
	<div class="w news clearfix"> 
		<div class="new fl">
			  <div class="title clearfix">
				  <h4 class="fl">活动专区</h4>
				  <a href=""class="fr">更多</a>
				 <div class="fr"></div>
			  </div>
			  <div class="pic1"><a href="">上uc.cn，下载抢100M流量礼包</a></div>
			  <ul>
			   <li><a href="">你没得到奖，因为你没有摇一摇</a></li>
			   <li><a href="">第二季环保袋活动开放申请啦</a></li>
			   <li><a href=""> 最壕UC微信号，天天送大奖</a></li>
			   <li><a href="">  UC省钱攻略大曝光：6000万红包等你来！</a></li>
			   <li><a href="">  手机浏览器成移动上网第一入口 UC稳居市场</a></li>
			  </ul>           
		</div>
		<div class="new fl">
			  <div class="title clearfix">
				  <h4 class="fl">新闻动态</h4>
				  <a href=""class="fr">更多</a>
				 <div class="fr"></div>
			  </div>
			  <div class="pic2"><a href="">不断寻找合伙人</a></div>
			  <ul>
			   <li><a href="">UC九游11月报告：《乱斗西游》成MOBA手…</a></li>
			   <li><a href=""> UC浏览器“抢票帮”颠覆传统 亲朋好友</a></li>
			   <li><a href=""> UC浏览器新版早就极致视频体验</a></li>
			   <li><a href="">    神马搜索主页导航更新，购物和吐槽更</a></li>
			   <li><a href="">    手机浏览器使用频率仅次于即时通讯</a></li>
			  </ul>
		</div>	                       
		<div class="new fl">
			  <div class="title clearfix">
				  <h4 class="fl">社区热帖</h4>
				  <a href=""class="fr">更多</a>
				 <div class="fr"></div>
			  </div>
			  <div class="pic3"><a href="">  UC浏览器抢票帮正式发布！团结一切力量</a></div>
			  <ul>
			   <li><a href=""> UC浏览器Android版10.0皮肤制作教程</a></li>
			   <li><a href="">年底求加薪技巧！哥拼的是拍马屁的技巧</a></li>
			   <li><a href="">   UC浏览器抢票帮——召唤朋友一起帮你抢</a></li>
			   <li><a href="">   UC姐神秘面容首次曝光，多图胆小慎入</a></li>
			   <li><a href=""> 【uc记者团】2015年春节回家 攻略</a></li>
			  </ul>
		</div>
		  </div>					
	</div>	
		<footer class="  clearfix">
	<div class="w">	
		<div class="tex1 fl">
		<h5 class="">UC浏览器</h5>	
		<ul>
			 <li><a href="">  产品动态</a></li>
			 <li><a href=""> 功能介绍</a></li>
			 <li><a href=""> 安卓浏览器</a></li>
			 <li><a href=""> iPhone浏览器</a></li>
			 <li><a href="">  电脑浏览器</a></li>
			 <li><a href=""> WP浏览器</a></li>
			 <li><a href="">  iPad浏览器</a></li>
			 <li><a href="">aPad浏览器</a></li>
             <li><a href="">  TV浏览器</a></li>
             <li><a href=""> 塞班浏览器</a></li>                           
		</ul>	
		</div>
		<div class="tex2 fl">
		<h5 class="">公司</h5>	
		<ul>
			 <li><a href=""> 公司首页</a></li>
			 <li><a href=""> 公司概况</a></li>
			 <li><a href=""> 公司动态</a></li>
			 <li><a href=""> 管理团队</a></li>
			 <li><a href=""> 企业文化</a></li>
			 <li><a href=""> 粉丝专区</a></li>
			 <li><a href=""> 荣誉之旅</a></li>
			 <li><a href=""> 联系我们</a></li>
		     <li><a href=""> 投资者  </a></li>
		     <li><a href=""> UC闪屏  </a></li>                          
		</ul>	
		</div>
		<div class="tex3 fl">
		<h5 class="">其它产品</h5>	
		<ul>
			 <li><a href="">UC九游 </a></li>
			 <li><a href="">PP助手 </a></li>
			 <li><a href="">神马搜索</a></li>
			 <li><a href="">UC云   </a></li>
			 <li><a href="">U点充值 </a></li>
			 <li><a href="">用户中心</a></li>
			 <li><a href="">体验中心</a></li>
			 <li><a href="">帮助中心</a></li>
		     <li><a href="">意见反馈</a></li>		                    
		</ul>	
		</div>
		<div class="tex4 fl">
		<h5 class=""> 开放合作</h5>	
		<ul>
			 <li><a href="">游戏开放平台 </a></li>
			 <li><a href="">运营商合作   </a></li>
			 <li><a href="">终端厂商合作 </a></li>
			 <li><a href="">互联网合作   </a></li>
			 <li><a href="">开发者中心   </a></li>
			 <li><a href="">战略投资     </a></li>			                                  
		</ul>	
		</div>
		<div class="tex5 fl">
		<h5 class="">招聘</h5>	
		<ul>
			 <li><a href="">社会招聘  </a></li>
			 <li><a href="">人才推荐  </a></li>
			 <li><a href="">校园招聘  </a></li>
			 <li><a href="">实习生招聘</a></li>
			 <li><a href="">内部推荐  </a></li>
			 <li><a href="">走进UC    </a></li>			
		</ul>	
		</div>
		<div class="tex6 fl">		
		    <div class="b1"><h5 class=""> 中文版</h5>	</div>		
			<div class="b2"><a href="">手机站     </a></div>
			<div class="b3"><a href="">Pad站      </a></div>
			<div class="b4"><a href="">TV站       </a></div>
			<div class="b5"><a href="">UC浏览器微博</a></div>
			<div class="b6"><a href="">UC浏览器贴吧</a></div>
			<div class="b7"><a href="">UC浏览器微信</a></div>													
		</div>
</div>
		<div class="txt clearfix  w">
			<ul>
			<li><a href="" class="fl">阿里巴巴集团      </a></li>
			<li><a href="" class="fl">淘宝网           </a></li>
			<li><a href="" class="fl">天猫             </a></li>
			<li><a href="" class="fl">聚划算           </a></li>
			<li><a href="" class="fl">全球速卖通        </a></li>
			<li><a href="" class="fl">阿里巴巴国际交易市场</a></li>
			<li><a href="" class="fl">1688              </a></li>
			<li><a href="" class="fl">阿里妈妈           </a></li>
			<li><a href="" class="fl">阿里旅行·去啊       </a></li>
			<li><a href="" class="fl">阿里云计算          </a></li>
			<li><a href="" class="fl">YunOS              </a></li>
			<li><a href="" class="fl">阿里通信            </a></li>
			<li><a href="" class="fl">万网                </a></li>
			<li><a href="" class="fl">高德                </a></li>
			</ul>
		</div>
		<div class="txt1 clearfix  w">
			<ul>
			<li><a href="" class="fl txt1_1">友情链接：     </a></li>
			<li><a href="" class="fl">手机游戏       </a></li>
			<li><a href="" class="fl">网易科技       </a></li>
			<li><a href="" class="fl">dospy智能手机网</a></li>
			<li><a href="" class="fl">历趣手机软件   </a></li>
			<li><a href="" class="fl">威锋网        </a></li>
			<li><a href="" class="fl">小说全搜      </a></li>
			<li><a href="" class="fl">IT之家        </a></li>
			<li><a href="" class="fl">前瞻网        </a></li>
			<li><a href="" class="fl">手机软件下载   </a></li>
			<li><a href="" class="fl">pc6下载       </a></li>
			<li><a href="" class="fl">KK语音        </a></li>
			<li><a href="" class="fl">安卓市场       </a></li>
			<li><a href="" class="fl ">机锋网        </a></li>
			</ul>
		</div>
		<div class="end w clearfix">
			<div class="fl logo_1"><a href=""><img src="images/logo_company.png" alt=""></a></div>
			<div class="fl "><p>
             ©2004-2014 uc.cn 版权所有 网络文化经营许可证：文网文[2010]176号
             中华人民共和国互联网药品信息服务资格证：（粤）-非经营性-2011-0120
             增值电信业务经营许可证: 粤B2-20070379 粤ICP备09210879号</p>
             </div>
			<div class="fl logo_2"><a href=""><img src="images/qa_wen.png" alt=""> </a></div>
			<div class="fl logo_3"><a href=""><img src="images/gs.png" alt="">     </a></div>
			<div class="fl logo_4"><a href=""><img src="images/knet_cn.png" alt=""></a></div>
			<div class="fl logo_5"><a href=""><img src="images/anva.png" alt="">   </a></div>
		</div>
		</footer>
	</body>
</html>
